<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estart</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <link type="text/css" rel="stylesheet" href="animate.css">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="all">
        <!--style="-webkit-app-region:drag"-->
        <div id="header" style="-webkit-app-region:drag" ondblclick="eMsg('max')">
            <div class="title">Estart</div>
            <div class="tab">
                <div class="plan p1" :class="{active: plan=='p1'}" @mousedown="plan='p1'">
                    <div class="triangle" v-show="plan=='p1'"></div>
                </div>
                <div class="plan p2" :class="{active: plan=='p2'}" @mousedown="plan='p2'">
                    <div class="triangle" v-show="plan=='p2'"></div>
                </div>
                <div class="plan p3" :class="{active: plan=='p3'}" @mousedown="plan='p3'">
                    <div class="triangle" v-show="plan=='p3'"></div>
                </div>
                <div class="plan p4" :class="{active: plan=='p4'}" @mousedown="plan='p4'">
                    <div class="triangle" v-show="plan=='p4'"></div>
                </div>
            </div>
            <div class="group-control">
                <button class="btn-close" @mousedown.stop onclick="eMsg('destroy')" title="关闭窗口"></button>
                <button class="btn-max" @mousedown.stop onclick="eMsg('max')" title="最大化"></button>
                <button class="btn-min" @mousedown.stop onclick="eMsg('min')" title="最小化"></button>
            </div>
            <div class="menu" @mousedown.stop onclick="eMsg('menu')"></div>
        </div>
        <div v-cloak id="main" @drop.prevent="mainDrop(itemDrag,$event)" @dragover.prevent.self.stop="mainDragover" onmousedown="eMsg('move')">
            <div v-show="plan=='p1'">
                <div v-for="(item,i) in itemList.p1" draggable="true" @dragstart="itemDrag=i" @drag="updateXY" @dragend="itemDragIn=-1,itemDrag=-1,mainDragIn=-1"
                    @dragover.prevent.stop="itemDragIn=i,mainDragIn=-1" @drop.prevent.stop="itemDrop(i)" :class="{dragin: (plan=='p1' && itemDragIn==i)}"
                    class="item" @click.left="run(i)" @contextmenu.prevent="contextmenu(i)" @mousedown.stop>
                    <img :src="item.icon" :alt="item.name" :title="item.path +' '+ (item.hotkey?item.hotkey:'')" class="bounceIn">
                    <p>{{item.name}}</p>
                </div>
            </div>
            <div v-show="plan=='p2'">
                <div v-for="(item,i) in itemList.p2" draggable="true" @dragstart="itemDrag=i" @drag="updateXY" @dragend="itemDragIn=-1,itemDrag=-1,mainDragIn=-1"
                    @dragover.prevent.stop="itemDragIn=i,mainDragIn=-1" @drop.prevent.stop="itemDrop(i)" :class="{dragin: (plan=='p2' && itemDragIn==i)}"
                    class="item" @click.left="run(i)" @contextmenu.prevent="contextmenu(i)" @mousedown.stop>
                    <img :src="item.icon" :alt="item.name" :title="item.path +' '+ (item.hotkey?item.hotkey:'')" class="bounceIn">
                    <p>{{item.name}}</p>
                </div>
            </div>
            <div v-show="plan=='p3'">
                <div v-for="(item,i) in itemList.p3" draggable="true" @dragstart="itemDrag=i" @drag="updateXY" @dragend="itemDragIn=-1,itemDrag=-1,mainDragIn=-1"
                    @dragover.prevent.stop="itemDragIn=i,mainDragIn=-1" @drop.prevent.stop="itemDrop(i)" :class="{dragin: (plan=='p3' && itemDragIn==i)}"
                    class="item" @click.left="run(i)" @contextmenu.prevent="contextmenu(i)" @mousedown.stop>
                    <img :src="item.icon" :alt="item.name" :title="item.path +' '+ (item.hotkey?item.hotkey:'')" class="bounceIn">
                    <p>{{item.name}}</p>
                </div>
            </div>
            <div v-show="plan=='p4'">
                <div v-for="(item,i) in itemList.p4" draggable="true" @dragstart="itemDrag=i" @drag="updateXY" @dragend="itemDragIn=-1,itemDrag=-1,mainDragIn=-1"
                    @dragover.prevent.stop="itemDragIn=i,mainDragIn=-1" @drop.prevent.stop="itemDrop(i)" :class="{dragin: (plan=='p4' && itemDragIn==i)}"
                    class="item" @click.left="run(i)" @contextmenu.prevent="contextmenu(i)" @mousedown.stop>
                    <img :src="item.icon" :alt="item.name" :title="item.path +' '+ (item.hotkey?item.hotkey:'')" class="bounceIn">
                    <p>{{item.name}}</p>
                </div>
            </div>
            <div class="item dragin" v-show="mainDragIn==1"><img src="./image/add.png">
                <p style="color:#2c92ff">addItem</p>
            </div>
            <div id="follow" class="item follow" v-show="itemDrag>-1"><img :src="follows.icon">
                <p>{{follows.name}}</p>
            </div>
        </div>
        <div id="footer">
            <div class="cmd">
                <input v-model="cmd" @keyup.enter="quickRun()" placeholder=" 输入命令行快速执行" onkeyup="this.size=(this.value.length>20?this.value.length+10:20);"
                    size="20" title="输入命令快速执行 如'fy' 'cmd /k node' 'cd d:'">
                <span>{{prompt}}</span>
            </div>
        </div>
    </div>
    <script>
        //获得启动项目列表返回json字符串 转为对象 用作数据赋值
        var itemList = JSON.parse(eItem());
        var log = (...params) => console.log(...params);
        var app = new Vue({
            el: '#all',
            data: {
                itemList: itemList,
                plan: "p1",
                cmd: "",
                prompt: "",
                itemDrag: -1,
                itemDragIn: -1,
                mainDragIn: -1,
                follows:{}
            },
            methods: {
                setPlan: function (plan) {
                    this.plan = plan;
                },
                run: function (i) {
                    //运行项目后关闭(隐藏)窗口
                    let p = this.plan;
                    let item = this.itemList[p][i];
                    //eMsg("close");
                    eShellExec(item.path, item.par, item.dir);
                    log("执行：", item.name, item.path, item.par, item.dir, p, i);
                },
                contextmenu: function (index) {
                    //弹出右键菜单
                    eMsg("itemMenu", this.plan, index)
                },
                splice: function (plan, index) {
                    //关联项目右键菜单的移除功能
                    this.itemList[plan].splice(index, 1);
                    log("删除item成员:", plan, index)
                },
                quickRun: function () {
                    //底部快速执行功能 windows系统命令,以及大部分的命令行程序,环境变量path目录中的可执行文件都可以运行
                    console.log(app.cmd);
                    let cmd, cmdl
                    let i = app.cmd.indexOf(" ");
                    if (i != -1) {
                        cmd = app.cmd.substring(0, i);
                        cmdl = app.cmd.substring(i + 1, app.cmd.length);
                        console.log(cmd, cmdl);
                        //置程序执行起始位置
                        if (cmd == "dir" || cmd == "cd") {
                            eSetDir(cmdl);
                            this.prompt = cmdl;
                            this.cmd = "";
                            return;
                        }
                    } else {
                        cmd = app.cmd;
                        cmdl = "";
                    }
                    eShellExec(cmd, cmdl);
                },
                mainDragover: function (e) {
                    this.mainDragIn = 1
                    this.itemDragIn = -1
                    //console.log(e)
                },
                mainDrop: function (i,e) {
                    if (i>-1) {
                        //拿到拖拽项目//push到列表 保存
                        let newItem = JSON.parse(JSON.stringify(this.itemList[this.plan][i]));
                        this.itemList[this.plan].push(newItem);
                        eSaveItem();
                    }
                    log("maindrop:", i,e.dataTransfer.files[0])
                },
                itemDragStart: function (i) {
                    this.itemDrag = i;
                    log("itemdragstart", i, event)
                },
                itemDragover: function (i) {
                    this.itemDragIn = i;
                    log("itemdragover", i, event, event.target)
                },
                itemDrop: function (i) {
                    if (i == this.itemDrag) {
                        this.itemDrag = -1;
                        this.itemDragIn = -1;
                        return;
                    }
                    log('itemDrop:',this.itemDrag,'>',i)
                    //拿到拖拽项目备用
                    let mItem = JSON.parse(JSON.stringify(this.itemList[this.plan][this.itemDrag]));
                    //列表中删除拖拽的项目
                    this.itemList[this.plan].splice(this.itemDrag, 1);
                    //将项目添加到对应位置
                    this.itemList[this.plan].splice(i, 0, mItem);
                    //清除拖拽样式
                    this.itemDrag = -1;
                    this.itemDragIn = -1;
                    //保存列表
                    eSaveItem();
                },
                updateXY: function (event) {
                    if(this.itemDrag>-1){
                        //this.follows.x=event.clientX-55;
                        //this.follows.y=event.clientY-85;
                        this.follows.name=this.itemList[this.plan][this.itemDrag].name;
                        this.follows.icon=this.itemList[this.plan][this.itemDrag].icon;
                        //log(this.follows.name,event,event.parentElement)
                        follow.style.left=event.clientX-50;
                        follow.style.top=event.clientY-50;
                    }
                    return false;
                }
            }
        })
        //已废弃 改用vue修饰符
        //阻止控制按钮鼠标按下事件传递 解决与#header的移动窗口功能冲突
        /*document.querySelectorAll("#header .group-control button").forEach(function (el) {
        	//console.log(el);
        	el.onmousedown = (e) => {
        		e.stopPropagation();
        	}
        })*/
        /************************************************************************************
         *函数导出说明
         *eMsg("msg",[,]) 窗口消息 主要负责传递控制消息给窗口
         *参数1 消息类型:move移动窗口,close关闭(隐藏),max最大化,min最小化,menu主菜单,itemMenu项目右键菜单
         *参数2 panl项目分组(即p1 p2 p3 p4) 配合itemMenu 使用 
         *参数3 项目数组索引 配合itemMenu 使用 
         *
         *eItem()
         *获得项目列表 itemlist 即./item.json  返回的是字符串 要用 JSON.parse(eItem()) 转成对象
         *
         *eShellExec("命令",[命令行,当前位置,,]) windows API ShellExecute
         *参数1 命令
         *参数2 命令行参数
         *参数3 当前位置 很多命令行程序中 所需的当前位置 比如cmd node nginx code.
         *************************************************************************************
         *暂时就这么多 有需要我再加
         */
    </script>

</body>

</html>